const canvasWidth = canvas.width;
const canvasHeight = canvas.height;



const arknightsImgUrl = "./images/Arknights.jpg";
const AmiyaImgUrl = "./images/happyBunny.jpg";
const baseImgUrl = "./images/base.png";
const calendarImgUrl = "./images/calendar.png";
const changeImgUrl = "./images/change.png";
const combatImgUrl = "./images/combat.png";
const depotImgUrl = "./images/depot.png";
const friendsImgUrl = "./images/friends.png";
const headhuntImgUrl = "./images/headhunt.png";
const infoImgUrl = "./images/info.png";
const messageImgUrl = "./images/message.png";
const missionImgUrl = "./images/mission.png";
const noticeImgUrl = "./images/notice.png";
const operatorImgUrl = "./images/operator.png";
const optionImgUrl = "./images/option.png";
const plusImgUrl = "./images/plus.png";
const recruitImgUrl = "./images/recruit.png";
const RHODESISLANDImgUrl = "./images/RHODESISLAND.jpg";
const sanityImgUrl = "./images/sanity.png";
const squadsImgUrl = "./images/squads.png";
const storeImgUrl = "./images/store.png";



const allData = {
    id: "root",
    behaviours: [
        {
            name: "Transform",
            x: 0,
            y: 0
        }
    ],
    children: [
        {
            id: "backGroundContainer",
            behaviours: [
                {
                    name: "Transform",
                    x: 0,
                    y: 0
                }
            ]
            ,
            children: [
                {
                    id: "ArknightsImg",
                    behaviours: [
                        {
                            name: "Transform",
                            x: 0,
                            y: 0
                        },
                        {
                            name: "ImageRenderer",
                            imageUrl: arknightsImgUrl,
                            width: canvasWidth * 1920 / 1080,
                            height: canvasHeight
                        }
                    ]
                }
            ]
        }
        , {
            id: "kanBanContainer",
            // x:-50,
            // y:30,
            behaviours: [
                {
                    name: "Transform",
                    x: -50,
                    y: 30
                }
            ],
            children: [
                {
                    id: "kanBanLine",
                    // type:"line",
                    // x:110,
                    // y:200,
                    // endx:170,
                    // endy:200,
                    // color:"white",
                    behaviours: [
                        {
                            name: "Transform",
                            x: 110,
                            y: 200
                        }, {
                            name: "LineRenderer",
                            endx: 170,
                            endy: 200,
                            color: "white"
                        }
                    ]
                }, {
                    id: "AmiyaImg",
                    // type:"image",
                    // x:0,
                    // y:0,
                    // imageUrl:AmiyaImgUrl,
                    // width:canvasWidth*1024/1024,
                    // height:canvasHeight,
                    behaviours: [
                        {
                            name: "Transform",
                            x: 0,
                            y: 0
                        }, {
                            name: "ImageRenderer",
                            imageUrl: AmiyaImgUrl,
                            width: canvasWidth * 1024 / 1024,
                            height: canvasHeight
                        },
                        {
                            name: "Click",
                            content: "amiya"
                        }
                    ]
                }, {
                    id: "kanBanCricle",
                    // type:"cricle",
                    // x:100,
                    // y:200,
                    // radius:12.5,
                    // shapeColor:"white",
                    // percent:1,
                    behaviours: [
                        {
                            name: "Transform",
                            x: 100,
                            y: 200
                        }, {
                            name: "CricleRenderer",
                            radius: 12.5,
                            shapeColor: "white",
                            percent: 1
                        }
                    ]
                }, {
                    id: "changeImg",
                    // type:"image",
                    // x:90,
                    // y:190,
                    // imageUrl:changeImgUrl,
                    // width:20,
                    // height:20,
                    behaviours: [
                        {
                            name: "Transform",
                            x: 90,
                            y: 190
                        }, {
                            name: "ImageRenderer",
                            imageUrl: changeImgUrl,
                            width: 20,
                            height: 20
                        }
                    ]
                }
            ]
        }
        // ,{
        //     id:"leftUpContainer",
        //     type:"container",
        //     x:10,
        //     y:5,
        //     children:[
        //         {
        //             id:"optionImgData",
        //             type:"image",
        //             x:0,
        //             y:0,
        //             imageUrl:optionImgUrl,
        //             width:25,
        //             height:25
        //         },{
        //             id:"noticeImgData",
        //             type:"image",
        //             x:30,
        //             y:3,
        //             imageUrl:noticeImgUrl,
        //             width:25,
        //             height:25
        //         },{
        //             id:"messageImgData",
        //             type:"image",
        //             x:60,
        //             y:3,
        //             imageUrl:messageImgUrl,
        //             width:25,
        //             height:25
        //         },{
        //             id:"calendarImgData",
        //             type:"image",
        //             x:90,
        //             y:3,
        //             imageUrl:calendarImgUrl,
        //             width:25,
        //             height:25
        //         }
        //     ]
        // },{
        //     id:"lvAndNameContainer",
        //     type:"container",
        //     x:-20,
        //     y:120,
        //     children:[
        //         {
        //             id:"RHODESISLANDImg",
        //             type:"image",
        //             x:0,
        //             y:0,
        //             imageUrl:RHODESISLANDImgUrl,
        //             width:100,
        //             height:100
        //         },{
        //             id:"lvContainer",
        //             type:"container",
        //             x:60,
        //             y:30,
        //             children:[
        //                 {
        //                     id:"backLvCricle",
        //                     type:"cricle",
        //                     x:20,
        //                     y:0,
        //                     radius:25,
        //                     shapeColor:"#525756",
        //                     percent:1
        //                 },{
        //                     id:"frontLvCricle",
        //                     type:"cricle",
        //                     x:20,
        //                     y:0,
        //                     radius:25,
        //                     shapeColor:"#fde733",
        //                     percent:1
        //                 },{
        //                     id:"lvNumberText",
        //                     type:"text",
        //                     x:0,
        //                     y:13,
        //                     content:"95",
        //                     font:"35px Clibri",
        //                     color:"white"
        //                 },{
        //                     id:"lvText",
        //                     type:"text",
        //                     x:15,
        //                     y:23,
        //                     content:"LV",
        //                     font:"10px Clibri",
        //                     color:"white"
        //                 }
        //             ]
        //         },{
        //             id:"nameContainer",
        //             type:"container",
        //             x:20,
        //             y:60,
        //             children:[
        //                 {
        //                     id:"nameRectangle",
        //                     type:"rectangle",
        //                     x:0,
        //                     y:0,
        //                     width:150,
        //                     height:15,
        //                     shapeColor:"#242727",
        //                     fillColor:"#323232"
        //                 },{
        //                     id:"doctorNameText",
        //                     type:"text",
        //                     x:30,
        //                     y:10,
        //                     content:"Doctor",
        //                     font:"20px Clibri",
        //                     color:"white"
        //                 }
        //             ]
        //         }
        //     ]
        // }
    ]
}



const ArknightsImgData = {
    type: "image",
    x: 0,
    y: 0,
    imageUrl: arknightsImgUrl,
    width: canvasWidth * 1920 / 1080,
    height: canvasHeight
}


const kanBanLineData = {
    type: "line",
    x: 110,
    y: 200,
    endx: 170,
    endy: 200,
    color: "white"
}

const AmiyaImgData = {
    type: "image",
    x: 0,
    y: 0,
    imageUrl: AmiyaImgUrl,
    width: canvasWidth * 1024 / 1024,
    height: canvasHeight
}

const kanBanCricleData = {
    type: "cricle",
    x: 100,
    y: 200,
    radius: 12.5,
    shapeColor: "white",
    percent: 1
}

const changeImgData = {
    type: "image",
    x: 90,
    y: 190,
    imageUrl: changeImgUrl,
    width: 20,
    height: 20
}



const optionImgData = {
    type: "image",
    x: 0,
    y: 0,
    imageUrl: optionImgUrl,
    width: 25,
    height: 25
}

const noticeImgData = {
    type: "image",
    x: 30,
    y: 3,
    imageUrl: noticeImgUrl,
    width: 25,
    height: 25
}

const messageImgData = {
    type: "image",
    x: 60,
    y: 3,
    imageUrl: messageImgUrl,
    width: 25,
    height: 25
}

const calendarImgData = {
    type: "image",
    x: 90,
    y: 3,
    imageUrl: calendarImgUrl,
    width: 25,
    height: 25
}



const RHODESISLANDImgData = {
    type: "image",
    x: 0,
    y: 0,
    imageUrl: RHODESISLANDImgUrl,
    width: 100,
    height: 100
}

const lvNumberTextData = {
    type: "text",
    x: 0,
    y: 13,
    content: "95",
    font: "35px Clibri",
    color: "white"
}

const nameRectangleData = {
    type: "rectangle",
    x: 0,
    y: 0,
    width: 150,
    height: 15,
    shapeColor: "#242727",
    fillColor: "#323232"
}

const friendsImgData = {
    type: "image",
    x: 0,
    y: 0,
    imageUrl: friendsImgUrl,
    width: 25,
    height: 25
}

const infoImgData = {
    type: "image",
    x: 0,
    y: 0,
    imageUrl: infoImgUrl,
    width: 25,
    height: 25
}



const sanityImgData = {
    type: "image",
    x: 10,
    y: 0,
    imageUrl: sanityImgUrl,
    width: 50,
    height: 50
}

const plusImgData = {
    type: "image",
    x: 0,
    y: 15,
    imageUrl: plusImgUrl,
    width: 20,
    height: 20
}

const combatImgData = {
    type: "image",
    x: 20,
    y: 0,
    imageUrl: combatImgUrl,
    width: 80,
    height: 80
}
